iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0
自我挑戰組

前端成長日記系列 第 4

前端包含甚麼?

  • 分享至 

  • xImage
  •  

「前端」這兩個字聽起來蠻酷的,似乎像是戰場的前線。前端的內容到底是甚麼?接下來就是我對這個名詞的理解,但其實圈子內對它的界定有時候差異會蠻大的,所以僅供參考喔!

前端可以分成「設計面」和「工程面」,職務上就區分為前端設計師、前端工程師。

設計面

「設計面」這部分呢,其實又包括了網頁介面的設計,例如主題顏色、風格、排版、使用動線等等,常見的工具有Photoshop, Sketch, Adobe XD 等等,那設計完成之後,當然就是真正布局到瀏覽器上的「切版」工作,這部分的工作就是看著設計出來的圖檔,使用 HTML & CSS 最大程度地還原在網頁上,會用到的工具常見有 Sublime, Visual Studio Code或者是比較老牌的DreamWeaver等等。前者通常職務上稱為「網頁設計師」,後者稱為「前端設計師」。

工程面

至於「前端工程師」呢,一言以蔽之就是在上述網頁layout的基礎之上,將真實的資料透過串接後端API的方式,注入到網頁中,並設計出前後端訊息交換的框架,以達到特定的一些功能。

所謂真正的資料常常是透過伺服器去資料庫取出來的,例如我們知道博客來網站上商品常常會更換,但在網站維護的實務上,不會每次有新商品要上架時,都需要前端設計師/工程師去修改撰寫好的網頁,而是只要讓網頁連接上資料庫,拿到最新的資料就好。一般商務網站常見的登入、瀏覽商品、購買等行為,也都是在大量的前後端訊息交換之中達到的。

這部分會用到的技術呢,就是大名鼎鼎的JavaScript了,這個程式語言,它可以選取、修改頁面上各個區塊元素,使得網站更加有變化,它可以偵測到使用者的滑鼠、鍵盤、滾動等行為,使得網站能與使用者「互動」,它也可以去呼叫後端資料(通常以json的格式傳到前端),拿到資料後進行處理放置到頁面上…

小節

總結一下,當有人稱呼自己為「前端XXX」時,我們可以進一步了解對方比較偏向「前端設計」還是「前端工程」。如果是設計,我們會期待他/她具備的就是 HTML & CSS 的能力,如果是工程,則是JavaScript甚至是其框架的使用能力。

前端是一個相對新興的區塊,傳統上比較不重視這塊,或者覺得可以分攤給後端們做一做就好。但團隊當中有沒有專職的前端設計、前端工程師,其實是可以從網站的細緻度推敲出來。

接下來我們會比較詳細地去談到前端各個技術環節,明天見囉!


上一篇
報名課程
下一篇
課程地圖(上)
系列文
前端成長日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言